<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Calendar / Datepicker | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Calendar / Datepicker | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Calendar / Datepicker</h1>
          <ul class="docs-index"></ul>
          <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
          <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).</p>
          <h2>Calendar App Methods</h2>
          <p>Let's look at related App methods to work with Calendar:</p>
          <div class="method-wrap">
            <p><span class="method">app.calendar.create(<span>parameters</span>)</span>- create Calendar instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span>. Object with calendar parameters</li>
            </ul>
            <p class="method-returns">Method returns created Calendar's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.calendar.destroy(<span>el</span>)</span>- destroy Calendar instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span>. Calendar element or Calendar instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.calendar.get(<span>el</span>)</span>- get Calendar instance by HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Calendar element.</li>
            </ul>
            <p class="method-returns">Method returns Calendar's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.calendar.close(<span>el</span>)</span>- close Calendar</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Calendar element to close.</li>
            </ul>
            <p class="method-returns">Method returns Calendar's instance</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    inputEl<span class="token punctuation">:</span> <span class="token string">'#calendar-input'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Calendar Parameters</h2>
          <p>Let's look on list of all available Calendar parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>calendarType</td>
                <td>string</td>
                <td>gregorian</td>
                <td>Calendar type, can be <code>gregorian</code> or <code>jalali</code></td>
              </tr>
              <tr>
                <td>value</td>
                <td>array</td>
                <td></td>
                <td>Array with initial selected dates. Each array item represents selected date</td>
              </tr>
              <tr>
                <td>disabled</td>
                <td>Date Range</td>
                <td></td>
                <td>Additonal disabled dates. Parameter accepts so called <b>Date Range</b> (look below for details)</td>
              </tr>
              <tr>
                <td>events</td>
                <td>Date Range</td>
                <td></td>
                <td>
                  <p>Dates with events. Will be marked with additonal "dot" on calendar day. Parameter accepts so called <b>Date Range</b> (look below for details).</p>
                  <p>If you want to indicate that day has few different events, it is possible to indicate this with multiple different color dots. In this case, you need to pass date range as array where each object will have <code>date</code> and <code>color</code> properties, e.g.</p><pre><code class="js"><span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2018</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    color<span class="token punctuation">:</span> <span class="token string">'#2196f3'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// same date but different color, one more dot will be added to this day</span>
  <span class="token punctuation">{</span>
    date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2018</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    color<span class="token punctuation">:</span> <span class="token string">'#4caf50'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>rangesClasses</td>
                <td>array</td>
                <td></td>
                <td>Date ranges you want to add custom CSS class for additional styling. Look below for accepted format</td>
              </tr>
              <tr>
                <td>formatValue</td>
                <td>function (values)</td>
                <td></td>
                <td>Function to format input value, should return new/formatted string value. <b>values</b> is array where each item represents selected date</td>
              </tr>
              <tr>
                <td>monthNames</td>
                <td>array</td>
                <td><pre><code class="js"><span class="token punctuation">[</span><span class="token string">'January'</span><span class="token punctuation">,</span> <span class="token string">'February'</span><span class="token punctuation">,</span> <span class="token string">'March'</span><span class="token punctuation">,</span> <span class="token string">'April'</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">,</span> <span class="token string">'June'</span><span class="token punctuation">,</span> <span class="token string">'July'</span><span class="token punctuation">,</span> <span class="token string">'August'</span> <span class="token punctuation">,</span> <span class="token string">'September'</span> <span class="token punctuation">,</span> <span class="token string">'October'</span><span class="token punctuation">,</span> <span class="token string">'November'</span><span class="token punctuation">,</span> <span class="token string">'December'</span><span class="token punctuation">]</span></pre></code></td>
                <td>Array with full month names</td>
              </tr>
              <tr>
                <td>monthNamesShort</td>
                <td>array</td>
                <td><pre><code class="js"><span class="token punctuation">[</span><span class="token string">'Jan'</span><span class="token punctuation">,</span> <span class="token string">'Feb'</span><span class="token punctuation">,</span> <span class="token string">'Mar'</span><span class="token punctuation">,</span> <span class="token string">'Apr'</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">,</span> <span class="token string">'Jun'</span><span class="token punctuation">,</span> <span class="token string">'Jul'</span><span class="token punctuation">,</span> <span class="token string">'Aug'</span><span class="token punctuation">,</span> <span class="token string">'Sep'</span><span class="token punctuation">,</span> <span class="token string">'Oct'</span><span class="token punctuation">,</span> <span class="token string">'Nov'</span><span class="token punctuation">,</span> <span class="token string">'Dec'</span><span class="token punctuation">]</span></pre></code></td>
                <td>Array with short month names</td>
              </tr>
              <tr>
                <td>dayNames</td>
                <td>array</td>
                <td><pre><code class="js"><span class="token punctuation">[</span><span class="token string">'Sunday'</span><span class="token punctuation">,</span> <span class="token string">'Monday'</span><span class="token punctuation">,</span> <span class="token string">'Tuesday'</span><span class="token punctuation">,</span> <span class="token string">'Wednesday'</span><span class="token punctuation">,</span> <span class="token string">'Thursday'</span><span class="token punctuation">,</span> <span class="token string">'Friday'</span><span class="token punctuation">,</span> <span class="token string">'Saturday'</span><span class="token punctuation">]</span></pre></code></td>
                <td>Array with week day names</td>
              </tr>
              <tr>
                <td>dayNamesShort</td>
                <td>array</td>
                <td><pre><code class="js"><span class="token punctuation">[</span><span class="token string">'Sun'</span><span class="token punctuation">,</span> <span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">]</span></pre></code></td>
                <td>Array with week day short names</td>
              </tr>
              <tr>
                <td>firstDay</td>
                <td>number</td>
                <td>1</td>
                <td>First day of the week. By default 1 - Monday</td>
              </tr>
              <tr>
                <td>weekendDays</td>
                <td>array</td>
                <td>[0, 6]</td>
                <td>Array with index numeber of weekend days, by default it is Saturday and Sunday</td>
              </tr>
              <tr>
                <td>jalali</td>
                <td>object</td>
                <td><pre><code class="js"><span class="token punctuation">{</span>
  monthNames<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'فروردین'</span><span class="token punctuation">,</span> <span class="token string">'اردیبهشت'</span><span class="token punctuation">,</span> <span class="token string">'خرداد'</span><span class="token punctuation">,</span> <span class="token string">'تیر'</span><span class="token punctuation">,</span> <span class="token string">'مرداد'</span><span class="token punctuation">,</span> <span class="token string">'شهریور'</span><span class="token punctuation">,</span> <span class="token string">'مهر'</span><span class="token punctuation">,</span> <span class="token string">'آبان'</span><span class="token punctuation">,</span> <span class="token string">'آذر'</span><span class="token punctuation">,</span> <span class="token string">'دی'</span><span class="token punctuation">,</span> <span class="token string">'بهمن'</span><span class="token punctuation">,</span> <span class="token string">'اسفند'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  monthNamesShort<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'فَر'</span><span class="token punctuation">,</span> <span class="token string">'اُر'</span><span class="token punctuation">,</span> <span class="token string">'خُر'</span><span class="token punctuation">,</span> <span class="token string">'تیر'</span><span class="token punctuation">,</span> <span class="token string">'مُر'</span><span class="token punctuation">,</span> <span class="token string">'شَه'</span><span class="token punctuation">,</span> <span class="token string">'مهر'</span><span class="token punctuation">,</span> <span class="token string">'آب'</span><span class="token punctuation">,</span> <span class="token string">'آذر'</span><span class="token punctuation">,</span> <span class="token string">'دی'</span><span class="token punctuation">,</span> <span class="token string">'بَه'</span><span class="token punctuation">,</span> <span class="token string">'اِس'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  dayNames<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'یک‌شنبه'</span><span class="token punctuation">,</span> <span class="token string">'دوشنبه'</span><span class="token punctuation">,</span> <span class="token string">'سه‌شنبه'</span><span class="token punctuation">,</span> <span class="token string">'چهارشنبه'</span><span class="token punctuation">,</span> <span class="token string">'پنج‌شنبه'</span><span class="token punctuation">,</span> <span class="token string">'جمعه'</span><span class="token punctuation">,</span> <span class="token string">'شنبه'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  dayNamesShort<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'1ش'</span><span class="token punctuation">,</span> <span class="token string">'۲ش'</span><span class="token punctuation">,</span> <span class="token string">'۳ش'</span><span class="token punctuation">,</span> <span class="token string">'۴ش'</span><span class="token punctuation">,</span> <span class="token string">'۵ش'</span><span class="token punctuation">,</span> <span class="token string">'ج'</span><span class="token punctuation">,</span> <span class="token string">'ش'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  firstDay<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// Saturday</span>
  weekendDays<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Friday</span>
  <span class="token punctuation">[</span><span class="token string">'فروردین'</span><span class="token punctuation">,</span> <span class="token string">'اردیبهشت'</span><span class="token punctuation">,</span> <span class="token string">'خرداد'</span><span class="token punctuation">,</span> <span class="token string">'تیر'</span><span class="token punctuation">,</span> <span class="token string">'مرداد'</span><span class="token punctuation">,</span> <span class="token string">'شهریور'</span><span class="token punctuation">,</span> <span class="token string">'مهر'</span><span class="token punctuation">,</span> <span class="token string">'آبان'</span><span class="token punctuation">,</span> <span class="token string">'آذر'</span><span class="token punctuation">,</span> <span class="token string">'دی'</span><span class="token punctuation">,</span> <span class="token string">'بهمن'</span><span class="token punctuation">,</span> <span class="token string">'اسفند'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span></pre></code>
                </td>
                <td>Object with configuration for Jalali type calendar</td>
              </tr>
              <tr>
                <td>dateFormat</td>
                <td>string</td>
                <td>'yyyy-mm-dd'</td>
                <td>Default date format, available expressions:
                  <ul>
                    <li>'yyyy' - 4 digits year</li>
                    <li>'yy' - 2 digits year</li>
                    <li>'mm' - 2 digits month number, from 01 to 12</li>
                    <li>'m' - month number, from 1 to 12</li>
                    <li>'MM' - full month name</li>
                    <li>'M' - short month name</li>
                    <li>'dd' - 2 digits day number, from 01 to 31</li>
                    <li>'d' - day number, from 1 to 31</li>
                    <li>'DD' - full week day name</li>
                    <li>'D' - short week day name</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>multiple</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enable to allows select multiple dates/values</td>
              </tr>
              <tr>
                <td>rangePicker</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enable to enable range picker. Not compatible with <code>multiple</code></td>
              </tr>
              <tr>
                <td>rangePickerMinDays</td>
                <td>number</td>
                <td>1</td>
                <td>Minimum days that need to be selected when <code>rangePicker</code> enabled</td>
              </tr>
              <tr>
                <td>rangePickerMaxDays</td>
                <td>number</td>
                <td>0</td>
                <td>Maximum days allowed to be selected when <code>rangePicker</code> enabled. <code>0</code> means no maximum</td>
              </tr>
              <tr>
                <td>direction</td>
                <td>string</td>
                <td>'horizontal'</td>
                <td>Months layout direction, could be 'horizontal' or 'vertical'</td>
              </tr>
              <tr>
                <td>minDate</td>
                <td>Date</td>
                <td>null</td>
                <td>Minimum allowed date</td>
              </tr>
              <tr>
                <td>maxDate</td>
                <td>Date</td>
                <td>null</td>
                <td>Maximum allowed date</td>
              </tr>
              <tr>
                <td>touchMove</td>
                <td>boolean</td>
                <td>true</td>
                <td>If enabled then calendar months slides follow finger during touch move</td>
              </tr>
              <tr>
                <td>animate</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables transition between months</td>
              </tr>
              <tr>
                <td>closeOnSelect</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enable and calendar will be closed when user pick a date</td>
              </tr>
              <tr>
                <td>weekHeader</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable week header with short name week days</td>
              </tr>
              <tr>
                <td>monthSelector</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable month selector in toolbar</td>
              </tr>
              <tr>
                <td>yearSelector</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable year picker in toolbar</td>
              </tr>
              <tr>
                <th colspan="4">Container/opener-specific parameters</th>
              </tr>
              <tr>
                <td>containerEl</td>
                <td>string<br>HTMLElement</td>
                <td></td>
                <td>String with CSS selector or HTMLElement where to place generated Calendar HTML. <b>Use only for inline calendar</b></td>
              </tr>
              <tr>
                <td>openIn</td>
                <td>string</td>
                <td>auto</td>
                <td>Can be <code>auto</code>, <code>popover</code> (to open calendar in popover), <code>sheet</code> (to open in sheet modal) or <code>customModal</code> (to open in custom Calendar modal overlay). In case of <code>auto</code> will open in sheet modal on small screens and in popover on large screens.</td>
              </tr>
              <tr>
                <td>inputEl</td>
                <td>string or HTMLElement</td>
                <td></td>
                <td>String with CSS selector or HTMLElement with related input element</td>
              </tr>
              <tr>
                <td>scrollToInput</td>
                <td>boolean</td>
                <td>true</td>
                <td>Scroll viewport (page-content) to input when calendar opened</td>
              </tr>
              <tr>
                <td>inputReadOnly</td>
                <td>boolean</td>
                <td>true</td>
                <td>Sets "readonly" attribute on specified input</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional CSS class name to be set on calendar element</td>
              </tr>
              <tr>
                <td>closeByOutsideClick</td>
                <td>boolean</td>
                <td>true</td>
                <td>If enabled, picker will be closed by clicking outside of picker or related input element</td>
              </tr>
              <tr>
                <td>toolbar</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables calendar toolbar</td>
              </tr>
              <tr>
                <td>toolbarCloseText</td>
                <td>string</td>
                <td>Done</td>
                <td>Text for Done/Close toolbar button</td>
              </tr>
              <tr>
                <td>header</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables calendar header</td>
              </tr>
              <tr>
                <td>headerPlaceholder</td>
                <td>string</td>
                <td>Select date</td>
                <td>Default calendar header placeholder text</td>
              </tr>
              <tr>
                <td>routableModals</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will add opened calendar to router history which gives ability to close calendar by going back in router history and set current route to the calendar modal</td>
              </tr>
              <tr>
                <td>url</td>
                <td>string</td>
                <td>date/</td>
                <td>Calendar modal URL that will be set as a current route</td>
              </tr>
              <tr>
                <td>view</td>
                <td>object</td>
                <td></td>
                <td>View where to set routing when <code>routableModals</code> enabled. Defaults to parent view of <code>inputEl</code> or main view if not found parent view</td>
              </tr>
              <tr>
                <td>backdrop</td>
                <td>boolean</td>
                <td></td>
                <td>Enables Calendar backdrop (dark semi transparent layer behind). By default only it is enabled when Calendar opened in Popover.</td>
              </tr>
              <tr>
                <td>closeByBackdropClick</td>
                <td>boolean</td>
                <td>true</td>
                <td>When enabled, Calendar will be closed on backdrop click</td>
              </tr>
              <tr>
                <th colspan="4">Render Functions</th>
              </tr>
              <tr>
                <td>renderWeekHeader</td>
                <td>function</td>
                <td></td>
                <td>Function to render week header. Must return week header HTML string</td>
              </tr>
              <tr>
                <td>renderMonths</td>
                <td>function(date)</td>
                <td></td>
                <td>Function to render months wrapper. Must return months container full HTML string</td>
              </tr>
              <tr>
                <td>renderMonth</td>
                <td>function(date, offset)</td>
                <td></td>
                <td>Function to render single month. Must return single month HTML string</td>
              </tr>
              <tr>
                <td>renderMonthSelector</td>
                <td>function</td>
                <td></td>
                <td>Function to render month selector. Must return month selector HTML string</td>
              </tr>
              <tr>
                <td>renderYearSelector</td>
                <td>function</td>
                <td></td>
                <td>Function to render year selector. Must return year selector HTML string</td>
              </tr>
              <tr>
                <td>renderHeader</td>
                <td>function</td>
                <td></td>
                <td>Function to render calendar header. Must return calendar header HTML string</td>
              </tr>
              <tr>
                <td>renderToolbar</td>
                <td>function</td>
                <td></td>
                <td>Function to render toolbar. Must return toolbar HTML string</td>
              </tr>
              <tr>
                <td>render</td>
                <td>function</td>
                <td></td>
                <td>Function to render whole calendar. Must return calendar full HTML string</td>
              </tr>
              <tr>
                <th colspan="4">Events</th>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token operator">...</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">opened</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Calendar opened'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="important-note">
            <p>Note that all following parameters can be used in global app parameters under <code>calendar</code> property to set defaults for all calendars. For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  calendar<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    url<span class="token punctuation">:</span> <span class="token string">'calendar/'</span><span class="token punctuation">,</span>
    dateFormat<span class="token punctuation">:</span> <span class="token string">'dd.mm.yyyy'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
          <h3>Date Range</h3>
          <p>Some of Calendar parameters (<b>disabled</b>, <b>events</b> and <b>rangesClasses</b>) accept so called <b>Date Range</b>. It is a simple way to specify and cover all possible dates combination.</p>
          <p>It can be array with dates, for example:</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">// Disabled 10th November 2015 and 11th November 2015:</span>
    disabled<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>It can be custom function where you need to return <b>true</b> or <b>false</b></p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">//Disabled all dates in November 2015</span>
    <span class="token function-variable function">disabled</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword-block">if</span> <span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">2015</span> <span class="token operator">&amp;&amp;</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword-block">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
            <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Or object with <b>from</b> and <b>to</b> properties</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">//Disable all dates between 1st October 2015 and 31 December 2015</span>
    disabled<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token keyword-block">from</span><span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        to<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Or object with just <b>from</b> or <b>to</b> properties</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">//Disable everyting since December 2015</span>
    disabled<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token keyword-block">from</span><span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Or object with <code>date</code> property:</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">// Disabled 1th December 2015</span>
    disabled<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Or array with mixed dates and objects:</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token keyword-block">from</span><span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            to<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token keyword-block">from</span><span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            to<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// same date but one more color dot will be added</span>
        <span class="token punctuation">{</span>
            date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2015</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token string">'#00ff00'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h3>rangesClasses</h3>
          <p><b>rangesClasses</b> parameter accepts array of objects with Date Range and class names for this range:</p><pre><code class="js"><span class="token keyword">var</span> calendar <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">//Add classes for november and october</span>
    rangesClasses<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">//Add "day-october' class for all october dates</span>
        <span class="token punctuation">{</span>
            <span class="token comment">// string CSS class name for this range in "cssClass" property</span>
            cssClass<span class="token punctuation">:</span> <span class="token string">'day-october'</span><span class="token punctuation">,</span> <span class="token comment">//string CSS class</span>
            <span class="token comment">// Date Range in "range" property</span>
            <span class="token function-variable function">range</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword-block">return</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">9</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//Add "day-holiday" class for 1-10th January 2015</span>
        <span class="token punctuation">{</span>
            cssClass<span class="token punctuation">:</span> <span class="token string">'day-holiday'</span><span class="token punctuation">,</span>
            range<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token keyword-block">from</span><span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                to<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Calendar Methods & Properties</h2>
          <p>After we initialize Calendar we have its initialized instance in variable (like <code>calendar</code> variable in examples above) with helpful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>calendar.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>calendar.containerEl</td>
                <td>Calendar wrapping container HTML element (when inline calendar is in use)</td>
              </tr>
              <tr>
                <td>calendar.$containerEl</td>
                <td>Dom7 instance with calendar wrapping container HTML element (when inline calendar is in use)</td>
              </tr>
              <tr>
                <td>calendar.el</td>
                <td>Calendar HTML element</td>
              </tr>
              <tr>
                <td>calendar.$el</td>
                <td>Dom7 instance with calendar HTML element</td>
              </tr>
              <tr>
                <td>calendar.inputEl</td>
                <td>Calendar input HTML element (passed in <code>inputEl</code> parameter)</td>
              </tr>
              <tr>
                <td>calendar.$inputEl</td>
                <td>Dom7 instance with calendar input HTML element (passed in <code>inputEl</code> parameter)</td>
              </tr>
              <tr>
                <td>calendar.value</td>
                <td>Array where each item represents selected date</td>
              </tr>
              <tr>
                <td>calendar.opened</td>
                <td><code>true</code> if Calendar is currently opened</td>
              </tr>
              <tr>
                <td>calendar.inline</td>
                <td><code>true</code> when inline calendar is in use</td>
              </tr>
              <tr>
                <td>calendar.cols</td>
                <td>Array with specified Calendar columns. Each column also has its own methods and properties (look below)</td>
              </tr>
              <tr>
                <td>calendar.url</td>
                <td>Calendar URL (that was passed in <code>url</code> parameter)</td>
              </tr>
              <tr>
                <td>calendar.view</td>
                <td>Calendar View (that was passed in <code>view</code> parameter) or found parent view</td>
              </tr>
              <tr>
                <td>calendar.params</td>
                <td>Object with initialization parameters</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>calendar.setValue(values)</td>
                <td>Set new selected dates. <code>values</code> is array where each item represents selected date</td>
              </tr>
              <tr>
                <td>calendar.getValue()</td>
                <td>Returns current calendar value</td>
              </tr>
              <tr>
                <td>calendar.addValue()</td>
                <td>Adds value to the values array. Useful in case if multiple selection is enabled (with <code>multiple: true</code> parameter)</td>
              </tr>
              <tr>
                <td>calendar.update()</td>
                <td>Rerenders calendar. Useful in case you added/changed values dynamically and need to update calendar layout</td>
              </tr>
              <tr>
                <td>calendar.nextMonth(duration)</td>
                <td>Calendar transition to next month for specified duration in ms</td>
              </tr>
              <tr>
                <td>calendar.prevMonth(duration)</td>
                <td>Calendar transition to previous month for specified duration in ms</td>
              </tr>
              <tr>
                <td>calendar.nextYear()</td>
                <td>Calendar transition to next year</td>
              </tr>
              <tr>
                <td>calendar.prevYear()</td>
                <td>Calendar transition to previous year</td>
              </tr>
              <tr>
                <td>calendar.setYearMonth(year, month, duration)</td>
                <td>Calendar transition to specified year, month for specified duration in ms</td>
              </tr>
              <tr>
                <td>calendar.open()</td>
                <td>Open Calendar</td>
              </tr>
              <tr>
                <td>calendar.close()</td>
                <td>Close Calendar</td>
              </tr>
              <tr>
                <td>calendar.destroy()</td>
                <td>Destroy Calendar instance and remove all events</td>
              </tr>
              <tr>
                <td>calendar.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>calendar.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>calendar.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>calendar.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>calendar.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h2>Calendar Events</h2>
          <p>Calendar will fire the following DOM events on calendar element and events on app and calendar instance:</p>
          <h3>DOM Events</h3>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>calendar:open</td>
                <td>Calendar Element<span>&lt;div class="calendar"&gt;</span></td>
                <td>Event will be triggered when Calendar starts its opening animation</td>
              </tr>
              <tr>
                <td>calendar:opened</td>
                <td>Calendar Element<span>&lt;div class="calendar"&gt;</span></td>
                <td>Event will be triggered after Calendar completes its opening animation</td>
              </tr>
              <tr>
                <td>calendar:close</td>
                <td>Calendar Element<span>&lt;div class="calendar"&gt;</span></td>
                <td>Event will be triggered when Calendar starts its closing animation</td>
              </tr>
              <tr>
                <td>calendar:closed</td>
                <td>Calendar Element<span>&lt;div class="calendar"&gt;</span></td>
                <td>Event will be triggered after Calendar completes its closing animation</td>
              </tr>
            </tbody>
          </table>
          <h3>App and Calendar Instance Events</h3>
          <p>Calendar instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>calendar</code>.</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>dayClick</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar, dayEl, year, month, day)</span></td>
                <td rowspan="2">Event will be triggered after click on calendar day element</td>
              </tr>
              <tr>
                <td>calendarDayClick</td>
                <td>app</td>
              </tr>
              <tr>
                <td>change</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar, value)</span></td>
                <td rowspan="2">Event will be triggered when calendar value changes</td>
              </tr>
              <tr>
                <td>calendarChange</td>
                <td>app</td>
              </tr>
              <tr>
                <td>monthAdd</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar, monthEl)</span></td>
                <td rowspan="2">Event will be triggered when new month HTML layout has been added. Useful if you need to postprocess added html elements</td>
              </tr>
              <tr>
                <td>calendarMonthAdd</td>
                <td>app</td>
              </tr>
              <tr>
                <td>monthYearChangeStart</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar, year, month)</span></td>
                <td rowspan="2">Event will be triggered in the begining of transition to next month</td>
              </tr>
              <tr>
                <td>calendarMonthYearChangeStart</td>
                <td>app</td>
              </tr>
              <tr>
                <td>monthYearChangeEnd</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar, year, month)</span></td>
                <td rowspan="2">Event will be triggered after transition to next month</td>
              </tr>
              <tr>
                <td>calendarMonthYearChangeEnd</td>
                <td>app</td>
              </tr>
              <tr>
                <td>init</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered when calendar initialized</td>
              </tr>
              <tr>
                <td>calendarInit</td>
                <td>app</td>
              </tr>
              <tr>
                <td>open</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered when Calendar starts its opening animation. As an argument event handler receives calendar instance</td>
              </tr>
              <tr>
                <td>calendarOpen</td>
                <td>app</td>
              </tr>
              <tr>
                <td>opened</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered after Calendar completes its opening animation. As an argument event handler receives calendar instance</td>
              </tr>
              <tr>
                <td>calendarOpened</td>
                <td>app</td>
              </tr>
              <tr>
                <td>close</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered when Calendar starts its closing animation. As an argument event handler receives calendar instance</td>
              </tr>
              <tr>
                <td>calendarClose</td>
                <td>app</td>
              </tr>
              <tr>
                <td>closed</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered after Calendar completes its closing animation. As an argument event handler receives calendar instance</td>
              </tr>
              <tr>
                <td>calendarClosed</td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeDestroy</td>
                <td>calendar</td>
                <td rowspan="2"><span>(calendar)</span></td>
                <td rowspan="2">Event will be triggered right before Calendar instance will be destroyed. As an argument event handler receives calendar instance</td>
              </tr>
              <tr>
                <td>calendarBeforeDestroy</td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/calendar.html">Examples</h2>
            <h4>Default Setup</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default setup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your birth date<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-default<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> calendarDefault <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-default'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</pre></code>
            <h4>Custom Date Format</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom date format<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select date<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-date-format<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> calendarDateFormat <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-date-format'</span><span class="token punctuation">,</span>
  dateFormat<span class="token punctuation">:</span> <span class="token string">'DD, MM dd, yyyy'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</pre></code>
            <h4>Multiple Values</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Multiple Values<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select multiple dates<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-multiple<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> calendarMultiple <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-multiple'</span><span class="token punctuation">,</span>
  dateFormat<span class="token punctuation">:</span> <span class="token string">'M dd yyyy'</span><span class="token punctuation">,</span>
  multiple<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Range Picker</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select date range<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-range<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> calendarRange <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-range'</span><span class="token punctuation">,</span>
  dateFormat<span class="token punctuation">:</span> <span class="token string">'M dd yyyy'</span><span class="token punctuation">,</span>
  rangePicker<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
            <h4>Open In Modal</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Open in Modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select date<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-modal<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> calendarModal <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-modal'</span><span class="token punctuation">,</span>
  openIn<span class="token punctuation">:</span> <span class="token string">'customModal'</span><span class="token punctuation">,</span>
  header<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  footer<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  dateFormat<span class="token punctuation">:</span> <span class="token string">'MM dd yyyy'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>With Events</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>With Events<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select date<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-events<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>now<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> now<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> now<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> weekLater <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>today<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> calendarEvents <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-events'</span><span class="token punctuation">,</span>
    dateFormat<span class="token punctuation">:</span> <span class="token string">'M dd yyyy'</span><span class="token punctuation">,</span>
    events<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token keyword-block">from</span><span class="token punctuation">:</span> today<span class="token punctuation">,</span>
        to<span class="token punctuation">:</span> weekLater
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">//- more events this day</span>
      <span class="token punctuation">{</span>
        date<span class="token punctuation">:</span> today<span class="token punctuation">,</span>
        color<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        date<span class="token punctuation">:</span> today<span class="token punctuation">,</span>
        color<span class="token punctuation">:</span> <span class="token string">'#00ff00'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
            <h4>Disabled Dates</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Disabled Dates<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list no-hairlines-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-content item-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select date<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-disabled<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> weekLater <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>today<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> calendarDisabled <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    inputEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-disabled'</span><span class="token punctuation">,</span>
    dateFormat<span class="token punctuation">:</span> <span class="token string">'M dd yyyy'</span><span class="token punctuation">,</span>
    disabled<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">from</span><span class="token punctuation">:</span> today<span class="token punctuation">,</span>
      to<span class="token punctuation">:</span> weekLater
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</pre></code>
            <h4>Inline With Custom Toolbar</h4><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Inline with custom toolbar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong no-padding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-calendar-inline-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code><pre><code class="js"><span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>
<span class="token keyword">var</span> monthNames <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'January'</span><span class="token punctuation">,</span> <span class="token string">'February'</span><span class="token punctuation">,</span> <span class="token string">'March'</span><span class="token punctuation">,</span> <span class="token string">'April'</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">,</span> <span class="token string">'June'</span><span class="token punctuation">,</span> <span class="token string">'July'</span><span class="token punctuation">,</span> <span class="token string">'August'</span> <span class="token punctuation">,</span> <span class="token string">'September'</span> <span class="token punctuation">,</span> <span class="token string">'October'</span><span class="token punctuation">,</span> <span class="token string">'November'</span><span class="token punctuation">,</span> <span class="token string">'December'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> calendarInline <span class="token operator">=</span> app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  containerEl<span class="token punctuation">:</span> <span class="token string">'#demo-calendar-inline-container'</span><span class="token punctuation">,</span>
  value<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  weekHeader<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token function-variable function">renderToolbar</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token string">'&lt;div class="toolbar calendar-custom-toolbar no-shadow">'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;div class="toolbar-inner">'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="left">'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;a href="#" class="link icon-only">&lt;i class="icon icon-back '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>app<span class="token punctuation">.</span>theme <span class="token operator">===</span> <span class="token string">'md'</span> <span class="token operator">?</span> <span class="token string">'color-black'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'">&lt;/i>&lt;/a>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="center">&lt;/div>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="right">'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;a href="#" class="link icon-only">&lt;i class="icon icon-forward '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>app<span class="token punctuation">.</span>theme <span class="token operator">===</span> <span class="token string">'md'</span> <span class="token operator">?</span> <span class="token string">'color-black'</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'">&lt;/i>&lt;/a>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
    <span class="token string">'&lt;/div>'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.calendar-custom-toolbar .center'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>monthNames<span class="token punctuation">[</span>c<span class="token punctuation">.</span>currentMonth<span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span> c<span class="token punctuation">.</span>currentYear<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.calendar-custom-toolbar .left .link'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        calendarInline<span class="token punctuation">.</span><span class="token function">prevMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.calendar-custom-toolbar .right .link'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        calendarInline<span class="token punctuation">.</span><span class="token function">nextMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">monthYearChangeStart</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.calendar-custom-toolbar .center'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>monthNames<span class="token punctuation">[</span>c<span class="token punctuation">.</span>currentMonth<span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span> c<span class="token punctuation">.</span>currentYear<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>